<div *ngIf="schedules$ | async as schedules; else loading">
  <div id="schedules-list">
    <div id="filters" class="pui-filter">
      <div class="pui-filter-center">
        <div style="height: 34px">
          &nbsp;
        </div>
      </div>
      <div class="pui-filter-actions">
        <div class="pui-filter-left">
          <div id="dropdown-actions" class="dropdown" *ngIf="countSelected() > 0" dropdown>
            <button dropdownToggle type="button" class="btn btn-default btn-dropdown" data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false">
              <span *ngIf="countSelected() == 1">Action (1)</span>
              <span *ngIf="countSelected() > 1">Actions ({{ countSelected() }})</span>
              <span class="caret"></span>
            </button>
            <ul *dropdownMenu class="dropdown-menu">
              <li>
                <a id="destroy-schedules" style="cursor: pointer" (click)="destroySelectedSchedules(schedules.page)">
                  <span *ngIf="countSelected() == 1">Destroy schedule</span>
                  <span *ngIf="countSelected() > 1">Destroy schedules</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="pui-filter-right" style="text-align: right">
          <button (click)="refresh(schedules.params)" name="app-refresh" type="button" class="btn btn-default btn-icon"
                  title="Refresh">
            <span class="glyphicon glyphicon-refresh"></span>
          </button>
        </div>
      </div>
    </div>
    <table *ngIf="schedules.page?.items && schedules.page.items.length > 0"
           class="table table-checkbox table-hover" id="taskSchedulesTable">
      <thead>
      <tr>
        <th style="width: 30px">
          <app-master-checkbox (change)="changeCheckboxes(schedules.page)" *ngIf="form?.checkboxes"
                               [appRoles]="['ROLE_CREATE']" [items]="form.checkboxes"></app-master-checkbox>
        </th>
        <th>
          Schedule Name
        </th>
        <th nowrap="">
          Cron Expression
        </th>
        <th>&nbsp;</th>
      </tr>
      </thead>
      <tbody>
      <ng-container
        *ngFor="let item of schedules.page.items | paginate: schedules.page.getPaginationInstance(); index as i">
        <tr>
          <td class="cell-checkbox">
            <input [appRoles]="['ROLE_CREATE']" type="checkbox" (change)="changeCheckboxes(schedules.page)"
                   [(ngModel)]="form.checkboxes[i]"/>
          </td>
          <td>
            <a class="link-schedule" (click)="details(item)" style="cursor: pointer">{{ item.name }}</a>
          </td>
          <td>
            {{ item.cronExpression }}
          </td>
          <td class="table-actions" width="50px" nowrap="">
            <div class="actions" role="group">
              <button type="button" name="schedule-destroy{{ i }}" (click)="destroySchedules([item])"
                      class="btn btn-default" title="Destroy">
                <span class="glyphicon glyphicon-trash"></span>
              </button>
              <button type="button" name="schedule-details{{ i }}" (click)="details(item)" class="btn btn-default"
                      title="Details">
                <span class="glyphicon glyphicon-search"></span>
              </button>
            </div>
          </td>
        </tr>
      </ng-container>
      </tbody>
    </table>
    <div *ngIf="schedules.page" id="empty" style="padding-top:1.5rem">
      <div *ngIf="isSchedulesEmpty(schedules.page)" class="text-center">
        <div class="alert alert-warning" style="display:inline-block;margin:0 auto">
          <strong>No associate schedule.</strong>
        </div>
      </div>
    </div>
  </div>
</div>
<ng-template #loading>
  <app-loader></app-loader>
</ng-template>
